<template>
  <div class="uart-port-config-container">
    <!-- <el-card> -->
    <div class="config-header">串口转串口配置</div>
    <el-table :data="portConfigs" :height="tableHeight" border size="mini" fit>
      <el-table-column prop="name" label="串口输入" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-for="port,index in outputPorts"
        :key="port"
        :label="port"
      >
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.outputs[index]['enable']" true-label="1" false-label="0">使能</el-checkbox>
        </template>
      </el-table-column>
    </el-table>
    <!-- </el-card> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      tableHeight: 'calc(100vh - 270px)',
      outputPorts: [],
      // uart2uartRule: [],
      uart2uart: []
    }
  },
  computed: {
    ...mapGetters(['SysCfgInfo']),
    uart2uartRule() {
      return this.SysCfgInfo.uart2uartRule
    },
    portConfigs() {
      return this.uart2uartRule.map((item, index) => ({
        name: `S${index + 1}输入`,
        uartId: index + 1,
        outputs: Array.from({ length: 16 }, (_, index) => ({
          enable: this.getBinaryDigit(item.enable, index + 1)
        }))

      }))
    }
  },
  created() {
    // this.getSysCfg()
    this.initOutputPorts()
  },
  methods: {
    initOutputPorts() {
      this.outputPorts = Array.from({ length: 16 }, (_, index) => `S${index + 1}输出`)
    },
    getBinaryDigit(HexNumber, x) {
      // 将十进制数转换为二进制字符串
      let binaryString = HexNumber.toString(2)

      // 如果二进制字符串长度不足 x 位，则在前面补零
      if (binaryString.length < x) {
        // 用 '0' 补齐到所需长度
        binaryString = binaryString.padStart(x, '0')
      }

      // 获取第 x 位的值（从右到左，索引从 0 开始）
      const index = binaryString.length - x
      return binaryString[index]
    },
    arrayToDecimal00(arr) {
      const binaryArray = arr.map(obj => obj.enable)
      const binaryString = binaryArray.reverse().join('')
      const decimalNumber = parseInt(binaryString, 2)
      return decimalNumber
    },
    arrayToDecimal(arr) {
      // 提取每个对象中的 enable 属性值，形成一个字符串数组
      const binaryArray = arr.map(obj => obj.enable)

      // 将数组连接成一个二进制字符串
      const binaryString = binaryArray.reverse().join('')

      // 将二进制字符串转换为十进制数
      const decimalNumber = parseInt(binaryString, 2)

      // const hexString = decimalNumber.toString(16).toLowerCase()

      // return '0x' + hexString

      // 将十进制数转换为16进制字符串
      const hexNumber = parseInt(decimalNumber.toString(16), 16)

      return hexNumber
    },
    save() {
      this.uart2uart = this.portConfigs.map((item) => {
        return {
          uartId: item.uartId,
          enable: this.arrayToDecimal(item.outputs)
        }
      })
      return this.uart2uart
    },
    getSettings() {
      // this.getSysCfg(1)
    },
    getSysCfg(flag = 0) {
      this.loading = true
      this.$store.dispatch('device/getSysCfg').then(res => {
        this.loading = false
        this.uart2uartRule = res.uart2uartRule
        if (flag === 1) {
          this.$message.success('串口转串口配置获取成功')
        }
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>
.uart-port-config-container {
  padding: 5px;
}

.config-header {
  font-size: 16px;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 10px;
}

.el-table-column {
  text-align: center;
}

.el-checkbox {
  display: block;
}
</style>
